<!--
 * @FileDescription: 罐区内容
 * @Author: 祝小文
 * @Date: 2022-09-27 14:09
-->
<script setup lang="ts">
import { emitter } from '@/composables'
import { ElMessage } from 'element-plus'
import _ from 'lodash'
import { Search } from '@element-plus/icons-vue'
import cg_icon from '@/assets/image/mapIcon/cg-icon.png'
import SecondaryConfirm from '@/components/SecondaryConfirm/index.vue'
import { featureClick, delMapFactorInfo, flyToLxOrCjid } from '@/utils/common/index'
import { querySearchInfo, insertOrUpdateGqxx, insertOrUpdateCgxx } from '@/service/api'

const chemicalStore = useChemicalStore()
const tankFarm = chemicalStore.productionStorage.tankFarm
const emit = defineEmits(['getCjInfo'])

//获取企业id
const qyId = computed(() => {
  return chemicalStore.qyInfo.id
})

//字典
//查询储罐类型
queryZdZdmcInfo({ key: 'cglx' }).then((res: any) => {
  tankFarm.dictionaries.cglx = res
})
//查询浮盘类型
queryZdZdmcInfo({ key: 'fplx' }).then((res: any) => {
  tankFarm.dictionaries.fplx = res
})
//查询泡沫产生器型号
queryZdZdmcInfo({ key: 'pmcsqxh' }).then((res: any) => {
  tankFarm.dictionaries.pmcsqxh = res
})

const gqActive: any = ref([])
const input = ref('')
const productionStorageList = ref([])

//搜索功能(300毫秒防抖)
const inputSearch = _.debounce((val: any) => {
  const params = {
    menuCode: 'gq',
    key: val,
    qyid: qyId.value,
  }
  querySearchInfo(params).then((res: any) => {
    productionStorageList.value = res

    //折叠面板打开项 为空就折叠所有面板
    for (let i = 0; i < res.length; i++) {
      gqActive.value.push(i)
    }
    if (!val) {
      gqActive.value = []
    }
  })
}, 300)

//罐区/储罐 删除数据/删除地图要素 确认
const secondaryConfirmSave = (type: any, typeCode: any) => {
  const item: any = chemicalStore.secondaryConfirmInfo.data

  //删除地图要素数据
  if (type === 'delMapData') {
    if (typeCode === 'gq') {
      delMapFactorInfo(item, 'scrollWall')
    } else if (typeCode === 'cg') {
      delMapFactorInfo(item, 'overlay')
    }
  }
  //删除数据
  else if (type === 'delData') {
    if (typeCode === 'gq') {
      const params = { id: item.id, qyid: item.qyid, sfyx: 0 }
      insertOrUpdateGqxx(params)
        .then((res: any) => {
          emitter.emit('tabLeft_refreshData') //更新左侧tab统计数量

          //删除地图要素
          window.GScrollWall.removeByName(item.id)
          window.GOverlay.removeByPatName(item.id)

          ElMessage.success('罐区删除成功')
          loadTankFarmData()
        })
        .catch((err: any) => {
          ElMessage.error('罐区删除失败')
        })
    } else if (typeCode === 'cg') {
      const params = { id: item.id, qyid: item.qyid, sfyx: 0 }
      insertOrUpdateCgxx(params)
        .then((res: any) => {
          //删除地图要素
          window.GOverlay.removeByName(item.id)

          ElMessage.success('储罐删除成功')
          loadTankFarmData()
        })
        .catch((err: any) => {
          ElMessage.error('储罐删除失败')
        })
    }
  }
}

/** ---------- 罐区相关方法 Start ---------- */
//加载罐区数据
const loadTankFarmData = () => {
  const params = {
    menuCode: 'gq',
    qyid: qyId.value,
  }
  querySearchInfo(params).then((res: any) => {
    productionStorageList.value = res
  })
}
loadTankFarmData()

//新增罐区
const addTankFarmClick = () => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  emit('getCjInfo', { cjId: null, fid: null, lx: 'add' })
  tankFarm.addTankFarmShow = true
}
//删除罐区
const delTankFarmClick = (item: any) => {
  chemicalStore.secondaryConfirmInfo = {
    show: true,
    text: '是否确定删除罐区以及该罐区下储罐信息',
    type: 'delData',
    typeCode: 'gq',
    data: item,
  }
}

//修改罐区
const updateTankFarmClick = (item: any) => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  emit('getCjInfo', { cjId: item.id, fid: null, lx: 'edit' })
  tankFarm.addTankFarmShow = true
}

//罐区上图
const addMapTankFarmClick = (item: any) => {
  featureClick({
    id: item.id,
    parentName: item.id,
    MapFactorType: 'scrollWall',
    MapFactorName: '罐区',
    bzlx: '5',
    text: item.mc,
    attribute: item,
  })
}
//罐区地图要素删除
const delMapTankFarmClick = (item: any) => {
  chemicalStore.secondaryConfirmInfo = {
    show: true,
    text: '是否确定删除该罐区地图要素',
    type: 'delMapData',
    typeCode: 'gq',
    data: item,
  }
}

//罐区选中事件
const tankfarmActiveIndex = ref(0)
const activeTankfarmClick = (item: any) => {
  flyToLxOrCjid('scrollWall', item.id)
  tankfarmActiveIndex.value = item.id
  storageTankActiveIndex.value = 0
}
/** ---------- 罐区相关方法 End ---------- */

/** ---------- 储罐相关方法 Start ---------- */
//新增储罐
const addStorageTankClick = (item: any) => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  tankFarm.addStorageTankShow = true
  emit('getCjInfo', { cjId: null, fid: item.id, lx: 'add' })
}
//删除储罐
const delStorageTankClick = (item: any) => {
  chemicalStore.secondaryConfirmInfo = {
    show: true,
    text: '是否确定删除储罐',
    type: 'delData',
    typeCode: 'cg',
    data: item,
  }
}
//修改储罐
const updateTankClick = (item: any) => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  emit('getCjInfo', { cjId: item.id, fid: item.fid, lx: 'edit' })
  tankFarm.addStorageTankShow = true
}

//储罐上图
const addMapStorageTankClick = (item: any) => {
  featureClick({
    id: item.id,
    parentName: item.fid,
    MapFactorType: 'overlay',
    MapFactorName: '储罐',
    bzlx: '6',
    text: `${item.bh} ${item.mc}`,
    mapIconUrl: cg_icon,
    parentMenuId: item.parentId,
    attribute: item,
  })
}
//储罐地图要素删除
const delMapStorageTankClick = (item: any) => {
  chemicalStore.secondaryConfirmInfo = {
    show: true,
    text: '是否确定删除该储罐地图要素',
    type: 'delMapData',
    typeCode: 'cg',
    data: item,
  }
}

//罐区选中事件
const storageTankActiveIndex = ref(0)
const activeStorageTankClick = (item: any, gqItem) => {
  flyToLxOrCjid('overlay', item.id)
  storageTankActiveIndex.value = item.id
  tankfarmActiveIndex.value = gqItem.id
}
/** ---------- 储罐相关方法 End ---------- */

/** 监听是否需要刷新数据 */
emitter.on('gq_refreshData', () => {
  //如果输入框中有值
  if (input.value) {
    inputSearch(input.value)
    return
  }
  loadTankFarmData()
})

/** 离开时销毁改事件 */
onUnmounted(() => {
  emitter.off('gq_refreshData')
})
</script>

<template>
  <div class="tankfarm-container">
    <el-input
      v-model.trim="input"
      placeholder="请输入编号或名称"
      size="large"
      :suffix-icon="Search"
      class="card-search card-bck-color"
      @input="inputSearch"
    />

    <div class="tankfarm-main">
      <el-collapse v-model="gqActive">
        <el-collapse-item
          v-for="(gqItem, gqIndex) in productionStorageList"
          :key="gqIndex"
          class="tankfarm-card"
          :class="{ 'tankfarm-active': gqItem.id === tankfarmActiveIndex }"
          :name="gqIndex"
          @click="activeTankfarmClick(gqItem)"
        >
          <template #title>
            <div style="display: flex; align-items: center">
              <i></i>
              <span class="single-line-text-exceeds" style="width: 230px" :title="gqItem.mc">{{
                gqItem.mc
              }}</span>
            </div>
            <div class="card-operation-btn">
              <!-- 罐区数据修改 -->
              <i title="编辑表单" @click.stop="updateTankFarmClick(gqItem)"></i>

              <!-- 罐区地图要素上图 -->
              <i
                v-if="gqItem.sfbh === 0"
                class="map-add"
                title="标注"
                @click.stop="addMapTankFarmClick(gqItem)"
              ></i>
              <!-- 罐区地图要素删除 -->
              <i
                v-else
                class="map-delete"
                title="删除标注"
                @click.stop="delMapTankFarmClick(gqItem)"
              ></i>

              <!-- 罐区数据删除 -->
              <i title="删除数据" @click.stop="delTankFarmClick(gqItem)"></i>
            </div>
          </template>

          <div
            v-for="(cgItem, cgIndex) in gqItem.searchInfoChild"
            :key="cgIndex"
            class="collapse-content-item"
            :class="{ 'storageTank-active': cgItem.id === storageTankActiveIndex }"
            @click.stop="activeStorageTankClick(cgItem, gqItem)"
          >
            <div style="display: flex" :title="cgItem.bh + '   ' + cgItem.mc">
              <div class="single-line-text-exceeds" style="max-width: 80px; margin-right: 15px">
                {{ cgItem.bh }}
              </div>
              <div style="max-width: 170px" class="single-line-text-exceeds">
                {{ cgItem.mc }}
              </div>
            </div>
            <div class="card-operation-btn">
              <!-- 储罐数据修改 -->
              <i title="编辑表单" @click.stop="updateTankClick(cgItem)"></i>

              <!-- 储罐地图要素上图 -->
              <i
                v-if="cgItem.sfbh === 0"
                title="标注"
                class="map-add"
                @click.stop="addMapStorageTankClick(cgItem)"
              ></i>
              <!-- 储罐地图要素删除 -->
              <i
                v-else
                title="删除标注"
                class="map-delete"
                @click.stop="delMapStorageTankClick(cgItem)"
              ></i>

              <!-- 储罐数据删除 -->
              <i title="删除数据" @click.stop="delStorageTankClick(cgItem)"></i>
            </div>
          </div>

          <div class="tankfarm-card-bottom" @click.stop="addStorageTankClick(gqItem)">
            <i></i>
            <span>新增储罐</span>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <div class="card-footer" @click="addTankFarmClick">
      <i></i>
      <span>新增罐区</span>
    </div>
  </div>

  <!-- 删除数据二次确认弹窗 -->
  <SecondaryConfirm @secondaryConfirmSave="secondaryConfirmSave" />
</template>

<style lang="less" scoped>
.tankfarm-active {
  /deep/.el-collapse-item__header {
    border: 1px solid #02979b !important;
    background: rgba(2, 151, 155, 0.4) !important;
  }
  /deep/.el-collapse-item__wrap {
    border: 1px solid #02979b !important;
    border-top: 0 !important;
  }
}

.storageTank-active {
  border: 1px solid #02979b !important;
  background: rgba(2, 151, 155, 0.4) !important;
}

.tankfarm-container {
  height: 100%;
  .tankfarm-main {
    height: calc(100% - 100px);
    overflow: auto;
    .tankfarm-card {
      margin-bottom: 16px;
      background-color: rgba(1, 7, 17, 0.6);
      border-radius: 8px;
      cursor: pointer;

      .tankfarm-card-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 36px;
        color: #fff;
        margin: 10px;
        background: rgba(109, 109, 109, 0.2);
        border: 1.5px dashed #6d6d6d;
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 16px;
        cursor: pointer;
        i {
          display: inline-block;
          width: 28px;
          height: 28px;
          margin-right: 8px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-image: url(@/assets/image/common/plus-icon.png);
        }
      }
    }
    .tankfarm-card:last-child {
      margin-bottom: 0;
    }

    /deep/.el-collapse {
      border-top: 0;
      border-bottom: 0;
    }

    /deep/.el-collapse-item__header {
      position: relative;
      height: 40px;
      border: 1px solid #797979;
      color: #fff;
      background: rgba(109, 109, 109, 0.2);
      border: 1px solid #6d6d6d;
      font-size: 16px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      & > div:first-child {
        i {
          display: inline-block;
          width: 20px;
          height: 20px;
          margin: -5px 5px 0 10px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-image: url(@/assets/image/ProductionStorage/gq-icon.png);
          vertical-align: middle;
        }
      }
      .card-operation-btn {
        position: absolute;
        right: 40px;
      }
    }
    /deep/.el-collapse-item__wrap {
      background-color: unset;
      border: 1px solid #797979;
      border-top: 0;
    }
    /deep/.el-collapse-item__content {
      padding-top: 5px;
      padding-bottom: 0;
    }

    .collapse-content-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px;
      height: 45px;
      padding: 0 10px;
      // background-color: rgba(1, 7, 17, 0.8);
      font-size: 14px;
      color: #fff;
      border: 1px solid #797979;
      border-radius: 4px;
      box-sizing: border-box;
      & > div {
        i {
          width: 26px;
          height: 26px;
        }
        i:last-child {
          margin-right: 0;
        }
        span {
          font-size: 14px;
        }
      }
    }
    .collapse-content-item:last-child {
      & > div {
        cursor: pointer;
        i {
          display: inline-block;
          width: 18px;
          height: 18px;
          margin-right: 5px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-image: url(/src/assets/image/common/plus-icon.png);
        }
      }
    }

    /deep/.el-collapse-item__arrow {
      color: #02979b;
      font-size: 24px;
    }
  }
}
</style>
